<template>
	<view class="content">
		<!-- <view v-show="isLoading == false"> -->
			<view class="banner">
				<view class="progress_box">
					<canvas class="progress_bg" canvas-id="cpbg"></canvas>
					<canvas class="progress_bar" canvas-id="cpbar"></canvas>
					<view class="progress_info">
						<image class="progress_img" :src="imgBaseUrl + '../../static/images/massageChair_usageTime_img.png'" mode="widthFix"></image>
						<view v-show="isTips" class="progress_tips animateText">正在享受按摩中...</view>
						<view v-show="!isTips" class="progress_tips">服务已完成</view>
					</view>
				</view>
			</view>
			<view class="corp_info">
				<image class="logo" :src="imgBaseUrl + '../../static/images/massageChair_index_didian.png'" mode="widthFix"></image>
				<view class="name">
					<view class="equipNumber">设备编号：{{ deviceId }}</view>
					<view class="equipLocal">地点：{{ address }}</view>
				</view>
			</view>
			<view v-show="isTips" class="time_title">剩余时间</view>
			<view class="time_acount">{{ vduration }}</view>
			<chargeButton v-if="browserClient == 'MicroMessenger'"></chargeButton>
			<infoButton></infoButton>
		<!-- </view> -->
		<!-- <view v-show="isLoading == true" style="text-align: center;">页面异常,请刷新试试</view> -->
	</view>
</template>
<script>
import infoButton from "@/components/infoButton/index.vue";
import chargeButton from "@/components/chargeButton/index.vue";
import { payedOrderDetail } from '@/api/massageChair'
import { toast, showConfirm, tansParams } from '@/utils/common'
export default {
	name: 'usageTime',
	components: { infoButton, chargeButton },

	data() {
		return {
			isLoading: true,
			type: '',
			isTips: false,
			address: uni.getStorageSync("address"),
			deviceId: getApp().globalData.deviceId,
			browserClient: getApp().globalData.browserClient,
			imgBaseUrl: "",
			progress_num: 10,  // 进度条占比
			duration: 0,    // 剩余倒计时时间（5分钟），秒
			countDownTime: 0, // 需要倒计时总时间秒
			orderUpdateTime: '2024-01-21 09:19:00',// 倒计时开始时间秒2024-01-21 09:19:00
		};
	},

	watch: {
		progress_num(newV, oldV) {
			newV = parseInt(newV)
			if (newV >= this.countDownTime) {
				let s = Math.round(this.progress_num / this.countDownTime * 100)
				this.drawCircle(s, '#F39780')
			} else {
				let s = Math.round(this.progress_num / this.countDownTime * 100)
				this.drawCircle(s)
			}
		},
	},
	computed: {
		// 圆环内的内容，倒计时或者文字提示
		vduration() {
			let h
			let s = this.duration
			console.log(this.duration)
			console.log('进度', this.progress_num)
			if (s <= this.countDownTime && s > 0) {
				this.isTips = true
				h = Math.floor(s / 60)
				s = s % 60
				h += ''
				s += ''
				h = (h.length == 1) ? '0' + h : h
				s = (s.length == 1) ? '0' + s : s
				return h + ':' + s
			} else {
				this.isTips = false
				this.drawProgressbg('#ff5c5c');
				return '已完成'
			}
		}

	},
	onShow: function () {
		this.type = this.$route.query.type;
		this.getPayedOrderDetail()


	},
	methods: {

		async getPayedOrderDetail() {
			// showConfirm(uni.getStorageSync("orderNo")).then(res => {
			// 	if (res.confirm) {

			// 	}
			// })
			// let param= this.type=='orderId'?{ orderId: Number(uni.getStorageSync("orderId"))}: { orderNo: uni.getStorageSync("orderNo")};
			this.isLoading=true;
			const res = await payedOrderDetail({ orderNo: uni.getStorageSync("orderNo") })
			if (res.results.code == 200) {
				this.isLoading=false;
				this.orderUpdateTime = res.results.data.paytime;
				this.countDownTime = res.results.data.massagetimelong;
				this.init()
				this.drawProgressbg('#ebf3fe');
			} else {
				toast(res.results.message)

			}

		},
		init() {
			let _this = this
			let updateTime = this.orderUpdateTime.replace(/-/g, '/')  // 时间格式化
			var date = new Date(updateTime).getTime()
			let currentTime = new Date().getTime()
			this.progress_num = Math.round((currentTime - date) / 1000)
			let differTime = this.countDownTime - this.progress_num     // 时间差
			if (differTime <= 0) {
				// 已超时
				this.progress_num = this.countDownTime
				this.duration = this.countDownTime + 1
				this.drawProgressbg('#F39780');
			} else {
				// 未超时
				this.duration = differTime
				let interval = setInterval(function () {
					// 圆环进度++
					_this.progress_num++
					// 倒计时--
					_this.duration--
					if (_this.progress_num >= _this.countDownTime || _this.duration <= 0) {
						_this.progress_num = this.countDownTime
						_this.duration = this.countDownTime + 1
						clearInterval(interval)
						interval = null
					}
				}, 1000)
			}
		},
		drawProgressbg: function (bgcolor) {
			// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
			var ctx = uni.createCanvasContext('cpbg', this);
			ctx.setLineWidth(20); // 设置圆环的宽度
			ctx.setStrokeStyle(bgcolor); // 设置圆环的颜色
			ctx.setLineCap('round'); // 设置圆环端点的形状
			ctx.beginPath(); //开始一个新的路径
			ctx.arc(150, 150, 115, 0.75 * Math.PI, 0.25 * Math.PI, false);
			//设置一个原点(55,55)，半径为100的圆的路径到当前路径
			ctx.stroke(); //对当前路径进行描边
			ctx.draw();
		},
		drawCircle: function (step, bgcolor) {
			var ctx = uni.createCanvasContext('cpbar', this);
			// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
			var gradient = ctx.createLinearGradient(28, 55, 192, 55);
			gradient.addColorStop('0', bgcolor ? bgcolor : '#56e4fd');
			gradient.addColorStop('1.0', bgcolor ? bgcolor : '#0c7afa');
			ctx.setLineWidth(20);
			ctx.setStrokeStyle(gradient);
			ctx.setLineCap('round');
			ctx.beginPath();
			// 参数step 为绘制的百分比
			step = 0.015 * step + 0.75;
			if (step >= 2) {
				step = step % 2;
			}
			ctx.arc(150, 150, 115, 0.75 * Math.PI, step * Math.PI, false);
			ctx.stroke();
			ctx.draw();
		}
	}
};
</script>
<style lang="scss">
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #fff;
	min-height: 100%;
	height: auto;
}

@keyframes siz {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

.animateText {
	overflow: hidden;
	white-space: nowrap;
	letter-spacing: 0.15em;
	animation: siz 3s steps(60) infinite;
}

.overtime {
	color: #ff5c5c !important;
	font-size: 26px !important;
}



.content {
	padding: 45px 16px;

	.banner {
		background: #fff;
		width: 100%;
		height: 274px;

		.progress_box {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.progress_bg,
		.progress_bar {
			position: absolute;
			width: 300px;
			height: 300px;
		}

		.progress_info {
			position: absolute;
			top: 56px;
			width: 130px;

			.progress_img {
				display: block;
				width: 100%;
			}

			.progress_tips {
				margin-top: 20px;
				font-size: 14px;
				font-weight: 500;
				color: #76839B;
			}
		}




	}

	.corp_info {
		width: 100%;
		height: 144rpx;
		padding: 30rpx 24rpx;
		background: #F8F9FD;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;

		.logo {
			display: block;
			width: 64rpx;
			height: 64rpx;
		}

		.name {
			margin-left: 26rpx;

			.equipNumber {
				font-size: 28rpx;
				font-weight: 500;
				color: #1F2E49;
			}

			.equipLocal {
				margin-top: 6rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #1F2E49;
			}
		}
	}

	.time_title {
		margin-top: 78rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #76839B;
		text-align: center;
	}

	.time_acount {
		margin-top: 10rpx;
		line-height: 134rpx;
		font-size: 96rpx;
		font-weight: 600;
		color: #16A1FE;
		text-align: center;
	}
}
</style>
